/** ele admin 布局样式 license by http://eleadmin.com */
@import './var.scss';

/* header */
.ele-admin-header {
  display: flex;
  align-items: center;
  height: $--header-height;
  box-shadow: $--header-light-shadow;
  background: $--color-white;
  z-index: calc(#{$--layout-z-index} + 2);
  box-sizing: border-box;
  position: relative;

  // logo
  .ele-admin-logo {
    width: $--sidebar-width;
    height: $--header-height;
    background: $--color-white;
    box-shadow: $--logo-light-shadow;
    transition: $--sidebar-transition;
    font-size: $--logo-font-size;
    color: $--logo-light-color;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    font-family: $--logo-font-family;
    cursor: pointer;

    img {
      width: $--logo-size;
      height: $--logo-size;

      & + span {
        margin-left: 10px;
      }
    }
  }

  // 面包屑
  .ele-admin-breadcrumb {
    flex-shrink: 0;
    white-space: nowrap;

    .el-breadcrumb__item {
      float: none;
      display: inline-block;
    }
  }

  // nav
  .ele-admin-header-nav-wrap {
    flex: 1;
  }

  .ele-admin-header-nav {
    white-space: nowrap;
    display: inline-block;
    border: none !important;
    background: none !important;

    & > .el-menu-item,
    & > .el-submenu > .el-submenu__title {
      padding: 0 12px;
      height: $--header-height;
      line-height: $--header-height;
    }

    & > .el-menu-item,
    & > .el-submenu {
      float: none;
      display: inline-block;
    }

    & > .el-submenu > .el-menu--horizontal {
      position: fixed !important;
    }
  }

  // 操作按钮
  .ele-admin-header-tool {
    display: flex;
    flex-shrink: 0;
    padding: 0 12px;
    font-size: 18px;

    .ele-admin-header-tool-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: $--header-height;
      padding: 0 12px;
      cursor: pointer;

      &:hover {
        background: $--header-tool-hover-bg;
      }

      & > .el-dropdown {
        line-height: 1;
        display: block;
        font-size: 18px;

        & > .el-icon-_language {
          font-size: 19px;
        }
      }

      // 用户信息
      .ele-admin-header-avatar {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 14px;

        .el-avatar {
          width: $--header-avatar-size;
          height: $--header-avatar-size;

          & + span {
            margin-left: 4px;
          }
        }

        .el-icon-arrow-down {
          font-size: 12px;
          margin-left: 4px;
          font-weight: bold;
        }
      }
    }
  }
}

/* main */
.ele-admin-main {
  display: flex;
  position: relative;
}

/* 侧边栏 */
.ele-admin-sidebar {
  flex-shrink: 0;
  overflow-x: hidden;
  width: $--sidebar-width;
  min-height: calc(100vh - #{$--header-height});
  z-index: calc(#{$--layout-z-index} + 3);
  box-shadow: $--sidebar-light-shadow;
  transition: $--sidebar-transition;
  background: $--color-white;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;

  .ele-admin-sidebar-menu-wrap {
    flex: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ele-admin-sidebar-menus > .el-menu {
    width: auto;
    border: none;
    background: none;
    transition: width $--sidebar-transition-anim;

    & > .el-menu-item,
    & > .el-submenu > .el-submenu__title {
      height: $--menu-sidebar-item-height;
      line-height: $--menu-sidebar-item-line-height;
    }

    & > .el-submenu,
    & > .el-menu-item {
      margin-top: $--menu-sidebar-item-margin;
    }
  }
}

/* 侧边栏一级菜单 */
.ele-admin-sidebar-nav {
  flex-shrink: 0;
  overflow-x: hidden;
  width: $--sidebar-nav-width;
  min-height: calc(100vh - #{$--header-height});
  box-shadow: -1px 0 0 $--border-color-extra-light inset;
  transition: width $--sidebar-transition-anim, left $--sidebar-transition-anim,
    box-shadow $--sidebar-transition-anim;
  z-index: calc(#{$--layout-z-index} + 3);
  background: $--color-white;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;

  .ele-admin-sidebar-nav-wrap {
    flex: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ele-admin-sidebar-nav-menu {
    position: relative;
    box-sizing: border-box;
    padding: $--sidebar-nav-padding;
    transition: padding $--sidebar-transition-anim;
    overflow-x: hidden;

    & > .el-menu.el-menu--collapse {
      width: auto;
      border: none;
      background: none;

      & > .el-submenu,
      & > .el-menu-item {
        height: auto;
        line-height: 1;
        padding: 0 !important;
        margin: $--sidebar-nav-item-margin;
        border-radius: $--border-radius-base;
        transition: all 0.2s;

        &:after {
          display: none;
        }
      }

      & > .el-menu-item > a,
      & > .el-submenu > .el-submenu__title {
        margin: 0;
        height: auto;
        line-height: 1;
        text-align: center;
        border-radius: $--border-radius-base;
        padding: $--sidebar-nav-item-padding !important;
        transition: all 0.2s;

        i {
          position: relative;
          font-size: $--sidebar-nav-icon-font-size;
          transition: all 0.2s;
        }

        span {
          width: auto;
          height: auto;
          display: block;
          font-size: $--sidebar-nav-font-size;
          margin: $--sidebar-nav-item-title-margin;
          max-height: $--sidebar-nav-font-size;
          transition: all 0.2s;
          overflow: hidden;
          white-space: nowrap;
          word-break: break-all;
          text-overflow: ellipsis;
          visibility: visible;
          transform: scale(1);
        }

        &:before {
          display: none;
        }
      }

      & > .el-menu-item:not(.is-active):hover,
      & > .el-submenu:not(.is-active) > .el-submenu__title:hover {
        background: $--header-tool-hover-bg;
      }

      & > .el-submenu.is-active > .el-submenu__title {
        background: $--menu-item-hover-fill;
      }
    }
  }

  .ele-admin-sidebar-nav-tool-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: $--font-size-large;
    color: $--color-text-regular;
    transition: all 0.2s;
    cursor: pointer;

    &:hover {
      color: $--color-primary;
    }
  }
}

.ele-admin-sidebar-nav-menu-pop > .el-menu.el-menu--popup {
  margin-left: $--sidebar-nav-pop-menu-margin;
  margin-right: $--sidebar-nav-pop-menu-margin;
}

/* 主体部分 */
.ele-admin-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - #{$--header-height});
  box-sizing: border-box;
  overflow: auto;

  .ele-admin-content {
    flex: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .ele-admin-content-view {
      flex: auto;
      box-sizing: border-box;
    }
  }
}

/* 主体的iframe组件 */
.ele-admin-iframe {
  width: 100%;
  height: calc(100vh - #{$--header-height});
  box-sizing: border-box;
  display: block;
  border: none;
}

.ele-admin-show-tabs .ele-admin-iframe {
  height: calc(100vh - #{$--header-height} - #{$--tabs-height});
}

/* 多页签 */
.ele-admin-tabs {
  height: $--tabs-height;
  background: $--color-white;
  box-shadow: $--header-light-shadow;
  padding-right: $--tabs-height;
  z-index: $--layout-z-index;
  box-sizing: border-box;
  position: relative;

  .el-tabs__item {
    height: $--tabs-height;
    line-height: $--tabs-height;
    color: $--color-text-secondary;
    transition: background-color 0.2s, color 0.2s;
    padding: 0 15px !important;

    &.is-closable {
      padding-right: 8px !important;
    }

    &:after {
      content: '';
      width: 0;
      height: 2px;
      background: $--color-primary;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    &:hover {
      color: $--color-text-primary;
      background: $--header-tool-hover-bg;
    }

    &.is-active {
      color: $--color-primary;
      background: $--menu-item-hover-fill;

      &:after {
        width: 100%;
      }
    }

    .el-icon-close {
      font-size: 13px;
      margin-left: 4px;
      color: $--color-text-secondary;

      &:before {
        transform: none;
        display: inline;
      }

      &:hover {
        color: #fff;
        background: $--color-danger;
      }
    }

    &:focus.is-active.is-focus:not(:active) {
      box-shadow: 0 0 0 2px $--color-primary inset;
      border-radius: 0;
    }
  }

  .el-tabs__active-bar,
  .el-tabs__content {
    display: none;
  }

  @mixin tabs-btn {
    width: $--tabs-height;
    height: $--tabs-height;
    line-height: $--tabs-height;
    color: $--color-text-secondary;
    font-size: $--font-size-medium;
    transition: background-color 0.2s, color 0.2s;
    box-sizing: border-box;
    text-align: center;

    &:hover {
      color: $--color-text-primary;
      background: $--header-tool-hover-bg;
    }
  }

  .el-tabs__nav-wrap {
    padding: 0 $--tabs-height;

    &:before,
    &:after {
      @include tabs-btn;
      content: '\e6de';
      position: absolute;
      top: 0;
      left: 0;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      font-family: 'element-icons' !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      cursor: not-allowed;
    }

    &:after {
      right: 0;
      left: auto;
      bottom: auto;
      height: auto;
      background: none;
      content: '\e6e0';
    }

    &.is-scrollable {
      padding: 0 ($--tabs-height - 1px) 0 $--tabs-height;

      &:before,
      &:after {
        display: none;
      }
    }
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    @include tabs-btn;

    i {
      vertical-align: -1px;
    }
  }

  .ele-admin-tabs-drop {
    position: absolute;
    right: 0;
    top: 0;

    .el-icon-arrow-down {
      @include tabs-btn;
      display: inline-block;
      cursor: pointer;
    }
  }
}

/* 开启多页签顶栏阴影处理 */
.ele-admin-show-tabs:not(.ele-admin-tab-card):not(.ele-admin-head-dark) {
  .ele-admin-header {
    box-shadow: $--sidebar-width -1px 0 $--border-color-extra-light inset;
    transition: padding-left $--sidebar-transition-anim,
      box-shadow $--sidebar-transition-anim;
  }

  &.ele-admin-collapse .ele-admin-header {
    box-shadow: $--sidebar-collapse-width -1px 0 $--border-color-extra-light inset;
  }

  &.ele-admin-side-mix {
    .ele-admin-header {
      box-shadow: $--sidebar-nav-width -1px 0 $--border-color-extra-light inset;
    }

    &.ele-admin-nav-collapse:not(.ele-admin-logo-auto) .ele-admin-header {
      box-shadow: $--sidebar-collapse-width -1px 0 $--border-color-extra-light inset;
    }
  }

  &.ele-admin-logo-auto .ele-admin-header {
    box-shadow: 0 -1px 0 $--border-color-extra-light inset;
  }
}

/* 折叠侧边栏 */
.ele-admin-collapse {
  .ele-admin-logo > span {
    display: none;
  }

  .ele-admin-logo,
  .ele-admin-sidebar,
  .ele-admin-sidebar .el-menu--collapse {
    width: $--sidebar-collapse-width;
  }

  .ele-admin-sidebar .el-menu--collapse > li > .el-tooltip,
  .ele-admin-sidebar .el-menu--collapse > li > .el-submenu__title {
    padding: 0 !important;
    text-align: center !important;
  }

  &.ele-admin-side-mix .ele-admin-sidebar-nav {
    box-shadow: $--sidebar-light-shadow;

    & + .ele-admin-sidebar {
      width: 0;
    }
  }
}

/* 侧栏双菜单一级折叠状态 */
.ele-admin-nav-collapse.ele-admin-side-mix {
  .ele-admin-logo {
    width: $--sidebar-collapse-width;
  }

  .ele-admin-sidebar-nav {
    width: $--sidebar-collapse-width;

    .ele-admin-sidebar-nav-menu {
      padding: $--sidebar-collapse-nav-padding;

      & > .el-menu.el-menu--collapse {
        & > .el-submenu,
        & > .el-menu-item {
          margin: $--sidebar-collapse-nav-item-margin;
        }

        & > .el-menu-item > a,
        & > .el-submenu > .el-submenu__title {
          padding: $--sidebar-collapse-nav-item-padding !important;

          i {
            font-size: $--sidebar-collapse-icon-font-size;
          }

          span {
            margin: 0;
            max-height: 0;
            transform: scale(0);
            visibility: hidden;
          }
        }
      }
    }
  }
}

// 侧边栏双排菜单
.ele-admin-side-mix {
  .ele-admin-logo {
    width: $--sidebar-nav-width;

    & > span {
      display: none;
    }
  }

  &:not(.ele-admin-collapse) .ele-admin-logo {
    box-shadow: -1px 0 0 $--border-color-extra-light inset;
  }

  .ele-admin-sidebar-nav + .ele-admin-sidebar {
    background: $--color-white;
    box-shadow: $--sidebar-light-shadow;
    width: calc(#{$--sidebar-width} - #{$--sidebar-collapse-width});
    z-index: calc(#{$--layout-z-index} + 1);
  }
}

/* 主题风格 */
// 固定顶栏
.ele-admin-fixed-header:not(.ele-admin-fixed-body) {
  padding-top: $--header-height;

  .ele-admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  &.ele-admin-show-tabs .ele-admin-body {
    padding-top: $--tabs-height;
  }

  .ele-admin-tabs {
    position: fixed;
    left: 0;
    right: 0;
    top: $--header-height;
    transition: left $--sidebar-transition-anim;
  }

  .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: $--sidebar-width;
  }

  &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
    left: $--sidebar-collapse-width;
  }

  &:not(.ele-admin-fixed-sidebar) .ele-admin-sidebar,
  &:not(.ele-admin-fixed-sidebar) .ele-admin-sidebar-nav {
    z-index: calc(#{$--layout-z-index} + 1);
  }

  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark)
    .ele-admin-logo {
    box-shadow: 0 -1px 0 $--border-color-extra-light inset;
  }

  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark).ele-admin-head-dark
    .ele-admin-logo,
  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark).ele-admin-tab-card
    .ele-admin-logo,
  &:not(.ele-admin-fixed-sidebar):not(.ele-admin-logo-auto):not(.ele-admin-side-dark):not(.ele-admin-show-tabs)
    .ele-admin-logo {
    box-shadow: none;
  }

  &.ele-admin-side-mix {
    .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
      left: calc(
        #{$--sidebar-width} - #{$--sidebar-collapse-width} + #{$--sidebar-nav-width}
      );
    }

    .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
      left: $--sidebar-nav-width;
    }

    &.ele-admin-nav-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: $--sidebar-width;
      }

      .ele-admin-sidebar-nav + .ele-admin-body .ele-admin-tabs {
        left: $--sidebar-collapse-width;
      }
    }

    &.ele-admin-collapse {
      .ele-admin-sidebar + .ele-admin-body .ele-admin-tabs {
        left: $--sidebar-nav-width;
      }

      &.ele-admin-nav-collapse
        .ele-admin-sidebar
        + .ele-admin-body
        .ele-admin-tabs {
        left: $--sidebar-collapse-width;
      }
    }
  }
}

// 固定侧边栏
.ele-admin-fixed-sidebar:not(.ele-admin-fixed-body) {
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    top: $--header-height;
  }

  &:not(.ele-admin-fixed-header):not(.ele-admin-logo-auto) .ele-admin-logo {
    position: fixed;
    top: 0;
    left: 0;
  }

  &.ele-admin-logo-auto:not(.ele-admin-fixed-header) .ele-admin-sidebar-nav,
  &.ele-admin-logo-auto:not(.ele-admin-fixed-header):not(.ele-admin-side-mix)
    .ele-admin-sidebar {
    top: 0;
    z-index: calc(#{$--layout-z-index} + 3);
  }

  .ele-admin-header,
  .ele-admin-sidebar + .ele-admin-body,
  .ele-admin-sidebar-nav + .ele-admin-body {
    padding-left: $--sidebar-width;
    transition: padding-left $--sidebar-transition-anim,
      box-shadow $--sidebar-transition-anim;
  }

  &.ele-admin-collapse {
    .ele-admin-sidebar + .ele-admin-body,
    &:not(.ele-admin-fixed-header):not(.ele-admin-side-mix) .ele-admin-header {
      padding-left: $--sidebar-collapse-width;
    }
  }

  &.ele-admin-side-mix {
    .ele-admin-sidebar {
      left: $--sidebar-nav-width;
    }

    .ele-admin-header,
    .ele-admin-sidebar + .ele-admin-body,
    .ele-admin-sidebar-nav + .ele-admin-body {
      padding-left: $--sidebar-nav-width;
    }

    &:not(.ele-admin-fixed-header) {
      .ele-admin-sidebar {
        position: relative;
        top: auto;
      }
    }

    &.ele-admin-nav-collapse {
      .ele-admin-header,
      .ele-admin-sidebar + .ele-admin-body,
      .ele-admin-sidebar-nav + .ele-admin-body {
        padding-left: $--sidebar-collapse-width;
      }

      .ele-admin-sidebar {
        left: $--sidebar-collapse-width;
      }
    }
  }

  &.ele-admin-fixed-header {
    .ele-admin-header {
      padding-left: 0;
    }

    &.ele-admin-side-mix {
      .ele-admin-sidebar + .ele-admin-body {
        padding-left: calc(
          #{$--sidebar-width} - #{$--sidebar-collapse-width} + #{$--sidebar-nav-width}
        );
      }

      &.ele-admin-collapse {
        .ele-admin-sidebar + .ele-admin-body {
          padding-left: $--sidebar-nav-width;
        }
      }

      &.ele-admin-nav-collapse {
        .ele-admin-header {
          padding-left: 0;
        }

        .ele-admin-sidebar {
          left: $--sidebar-collapse-width;
        }

        .ele-admin-sidebar + .ele-admin-body {
          padding-left: $--sidebar-width;
        }

        &.ele-admin-collapse .ele-admin-sidebar + .ele-admin-body {
          padding-left: $--sidebar-collapse-width;
        }
      }
    }
  }
}

// 固定主体
.ele-admin-fixed-body {
  .ele-admin-content {
    height: calc(100vh - #{$--header-height});
    overflow: auto;
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    height: calc(100vh - #{$--header-height});
  }

  &.ele-admin-show-tabs {
    .ele-admin-content {
      height: calc(100vh - #{$--header-height} - #{$--tabs-height});
    }

    &.ele-admin-tab-card .ele-admin-content {
      height: calc(
        100vh - #{$--header-height} - #{$--tabs-height} - #{$--tabs-card-padding}
      );
    }
  }
}

// 全屏内容区域
.ele-admin-body-fullscreen {
  padding-top: 0 !important;

  .ele-admin-header,
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    display: none;
  }

  .ele-admin-body {
    min-height: 100vh;
    padding-left: 0 !important;
  }

  .ele-admin-tabs {
    left: 0 !important;
    top: 0 !important;
  }

  &.ele-admin-fixed-body {
    .ele-admin-content {
      height: 100vh !important;
    }

    &.ele-admin-show-tabs:not(.ele-admin-content-fullscreen) {
      .ele-admin-content {
        height: calc(100vh - #{$--tabs-height}) !important;
      }

      &.ele-admin-tab-card .ele-admin-content {
        height: calc(
          100vh - #{$--tabs-height} - #{$--tabs-card-padding}
        ) !important;
      }
    }
  }

  &.ele-admin-content-fullscreen {
    .ele-admin-body {
      padding-top: 0 !important;
    }

    .ele-admin-tabs {
      display: none;
    }
  }
}

// 主体内容定宽
.ele-admin-body-limit .ele-body {
  max-width: $--body-limit-width;
  margin: 0 auto;
}

// logo宽度自适应
.ele-admin-logo-auto.ele-admin-layout {
  .ele-admin-logo {
    width: auto;
    padding: 0 12px 0 24px;
    color: $--logo-light-color;
    background: none;
    box-shadow: none;

    & > span {
      display: inline;
    }

    & + .ele-admin-header-nav {
      margin-left: 12px;
    }
  }

  .ele-admin-sidebar,
  .ele-admin-sidebar-nav {
    z-index: calc(#{$--layout-z-index} + 1);
  }

  &.ele-admin-head-dark .ele-admin-logo {
    color: $--logo-dark-color;
  }
}

// 暗色顶栏
.ele-admin-head-dark .ele-admin-header {
  color: $--menu-dark-item-selected-color;
  box-shadow: $--header-dark-shadow;
  background: $--sidebar-background-dark;

  .el-breadcrumb__inner,
  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link,
  .el-breadcrumb__separator {
    color: $--menu-dark-item-color;
  }

  .el-breadcrumb__inner a:hover,
  .el-breadcrumb__inner.is-link:hover {
    color: $--menu-dark-item-selected-color;
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
    color: $--menu-dark-item-selected-color;
  }

  .el-dropdown {
    color: $--menu-dark-item-selected-color;
  }

  .ele-admin-header-tool .ele-admin-header-tool-item:hover {
    background: $--header-dark-tool-hover-bg;
  }
}

// 暗色侧边栏
.ele-admin-side-dark {
  .ele-admin-logo {
    color: $--logo-dark-color;
    box-shadow: $--logo-dark-shadow;
    background: $--sidebar-background-dark;
  }

  .ele-admin-sidebar {
    box-shadow: $--sidebar-dark-shadow;
    background: $--sidebar-background-dark;
  }

  &.ele-admin-side-mix {
    &:not(.ele-admin-collapse) {
      .ele-admin-logo,
      .ele-admin-sidebar-nav {
        box-shadow: none;
      }
    }

    .ele-admin-sidebar-nav {
      background: $--sidebar-background-dark;

      .ele-admin-sidebar-nav-menu > .el-menu.el-menu--collapse {
        & > .el-menu-item:not(.is-active):hover,
        & > .el-submenu:not(.is-active) > .el-submenu__title:hover {
          background: $--header-dark-tool-hover-bg;
        }

        & > .el-submenu.is-active > .el-submenu__title {
          background: $--color-primary;
        }
      }

      .ele-admin-sidebar-nav-tool-item {
        color: $--menu-dark-item-color;

        &:hover {
          color: $--menu-dark-item-selected-color;
        }
      }
    }
  }
}

// 选项卡圆点风格
.ele-admin-tab-dot .ele-admin-tabs {
  .el-tabs__item {
    border-right: 1px solid $--border-color-extra-light;

    &:before {
      content: '';
      width: 9px;
      height: 9px;
      margin-right: 8px;
      border-radius: 50%;
      display: inline-block;
      background: $--border-color-base;
      transition: background-color 0.2s;
    }

    &.is-active:before {
      background: $--color-primary;
    }

    &:after {
      display: none;
    }

    &:focus.is-active.is-focus:not(:active) {
      box-shadow: 0 0 0 2px $--color-primary inset,
        0 0 0 2px $--color-primary inset;
      border-radius: 0;
    }
  }

  .el-tabs__nav-wrap:before,
  .el-tabs__nav-prev {
    border-right: 1px solid $--border-color-extra-light;
  }

  .el-tabs__nav-wrap:after,
  .el-tabs__nav-next,
  .ele-admin-tabs-drop .el-icon-arrow-down {
    border-left: 1px solid $--border-color-extra-light;
  }
}

// 选项卡卡片风格
@mixin card-tab-item {
  border-radius: 4px;
  height: calc(#{$--tabs-height} - #{$--tabs-card-padding});
  line-height: calc(#{$--tabs-height} - #{$--tabs-card-padding});
}

.ele-admin-tab-card .ele-admin-tabs {
  padding-top: $--tabs-card-padding;
  background: $--layout-body-background;
  box-shadow: 0 $--tabs-card-padding 0 $--layout-body-background;

  .el-tabs__item {
    @include card-tab-item;
    background: $--color-white;

    &:after {
      display: none;
    }

    &.is-active {
      background: $--color-white;
    }

    & + .el-tabs__item {
      margin-left: $--tabs-card-padding;
    }

    &:focus.is-active.is-focus:not(:active) {
      box-shadow: 0 0 0 2px $--color-primary inset;
      border-radius: 4px;
    }
  }

  .el-tabs__nav-wrap {
    &:before,
    &:after {
      @include card-tab-item;
    }
  }

  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    @include card-tab-item;
    background: none;
  }

  .ele-admin-tabs-drop {
    top: $--tabs-card-padding;
    right: $--tabs-card-padding;

    .el-icon-arrow-down {
      @include card-tab-item;
      width: calc(#{$--tabs-height} - #{$--tabs-card-padding});
      background: $--color-white;
    }
  }

  & + .ele-admin-content {
    margin-top: $--tabs-card-padding;

    & > .ele-admin-content-view > .ele-body:first-child {
      padding-top: 0;
    }
  }
}

// 侧边栏彩色图标
.ele-admin-side-colorful {
  .ele-admin-sidebar .ele-admin-sidebar-menus > .el-menu > li {
    & > .el-submenu__title > i:first-child,
    & > a > i:first-child,
    & > a > .el-tooltip > i:first-child {
      color: $--menu-dark-item-selected-color;
      background: #61b2fc;
      width: $--sidebar-colorful-icon-width;
      height: $--sidebar-colorful-icon-width;
      line-height: $--sidebar-colorful-icon-width;
      font-size: $--sidebar-colorful-icon-size;
      border-radius: 50%;
      text-align: center;
      vertical-align: baseline;

      &:before {
        vertical-align: -1px;
      }
    }

    &:nth-child(even) {
      & > .el-submenu__title > i:first-child,
      & > a > i:first-child,
      & > a > .el-tooltip > i:first-child {
        background: #7dd733;
      }
    }

    &:nth-child(3) {
      & > .el-submenu__title > i:first-child,
      & > a > i:first-child,
      & > a > .el-tooltip > i:first-child {
        background: #32a2d4;
      }
    }

    &:nth-child(4) {
      & > .el-submenu__title > i:first-child,
      & > a > i:first-child,
      & > a > .el-tooltip > i:first-child {
        background: #7383cf;
      }
    }

    &:nth-child(5) {
      & > .el-submenu__title > i:first-child,
      & > a > i:first-child,
      & > a > .el-tooltip > i:first-child {
        background: #f5686f;
      }
    }

    &:nth-child(6) {
      & > .el-submenu__title > i:first-child,
      & > a > i:first-child,
      & > a > .el-tooltip > i:first-child {
        background: #2bccce;
      }
    }

    &:nth-child(7) {
      & > .el-submenu__title > i:first-child,
      & > a > i:first-child,
      & > a > .el-tooltip > i:first-child {
        background: #7dd733;
      }
    }

    &:nth-child(8) {
      & > .el-submenu__title > i:first-child,
      & > a > i:first-child,
      & > a > .el-tooltip > i:first-child {
        background: #faad14;
      }
    }
  }

  .ele-admin-sidebar .el-submenu > .el-menu > li {
    & > a > i:first-child:not(.el-submenu__icon-arrow),
    & > .el-submenu__title > i:first-child:not(.el-submenu__icon-arrow) {
      display: none;
    }

    & > a > span:before,
    & > .el-submenu__title > span:before {
      content: '';
      width: 8px;
      height: 8px;
      margin-right: 10px;
      position: static;
      border-radius: 50%;
      display: inline-block;
      vertical-align: 0.05em;
      background: $--border-color-base;
      transition: background 0.3s;
    }

    &.is-active,
    &:hover {
      & > a > span:before,
      & > .el-submenu__title > span:before {
        background: $--color-primary;
      }
    }
  }

  &.ele-admin-side-dark .ele-admin-sidebar .el-submenu > .el-menu > li {
    &.is-active,
    &:hover {
      & > a > span:before,
      & > .el-submenu__title > span:before {
        background: $--menu-dark-item-selected-color;
      }
    }
  }
}

// 色弱模式
.ele-admin-weak {
  filter: invert(0.8);
  background: $--color-text-primary;
  overflow-x: hidden;
}

/* 小屏幕遮罩层 */
.ele-admin-shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(#{$--layout-z-index} + 2);
  transition: background-color $--sidebar-transition-anim,
    left $--sidebar-transition-anim;
  visibility: hidden;
}

/* 小屏幕样式 */
@media only screen and (max-width: 768px) {
  .ele-admin-logo,
  .ele-admin-sidebar {
    position: fixed !important;
    left: 0 !important;
    width: $--sidebar-width !important;
    z-index: calc(#{$--layout-z-index} + 3) !important;
  }

  .ele-admin-sidebar {
    top: $--header-height !important;
  }

  .ele-admin-logo > span {
    display: inline !important;
  }

  .ele-admin-body,
  .ele-admin-header {
    padding-left: 0 !important;
  }

  .ele-admin-tabs {
    left: 0 !important;
  }

  .ele-admin-breadcrumb,
  .ele-admin-sidebar-nav {
    display: none;
  }

  .ele-admin-layout:not(.ele-admin-collapse) .ele-admin-shade {
    left: $--sidebar-width;
    background: $--layout-mask-bg;
    visibility: visible;
  }

  .ele-admin-collapse .ele-admin-sidebar,
  .ele-admin-collapse .ele-admin-logo {
    left: calc(0px - #{$--sidebar-width}) !important;
    box-shadow: none !important;
  }

  .ele-admin-show-tabs:not(.ele-admin-tab-card):not(.ele-admin-head-dark)
    .ele-admin-header {
    box-shadow: 0 -1px 0 $--border-color-extra-light inset !important;
  }
}

@media only screen and (max-width: 576px) {
  .ele-admin-header .ele-admin-header-tool {
    padding: 0 6px;

    .ele-admin-header-tool-item {
      padding: 0 10px;
    }
  }
}

// 滚动条样式
.ele-admin-head-dark
  .ele-admin-header-nav-wrap
  > .el-scrollbar__bar
  > .el-scrollbar__thumb,
.ele-admin-side-dark
  .ele-admin-sidebar-nav-wrap
  > .el-scrollbar__bar
  > .el-scrollbar__thumb,
.ele-admin-side-dark:not(.ele-admin-side-mix)
  .ele-admin-sidebar-menu-wrap
  > .el-scrollbar__bar
  > .el-scrollbar__thumb {
  background-color: rgba(221, 221, 221, 0.35);
}

.ele-admin-head-dark
  .ele-admin-header-nav-wrap
  > .el-scrollbar__bar
  > .el-scrollbar__thumb:hover,
.ele-admin-side-dark
  .ele-admin-sidebar-nav-wrap
  > .el-scrollbar__bar
  > .el-scrollbar__thumb:hover,
.ele-admin-side-dark:not(.ele-admin-side-mix)
  .ele-admin-sidebar-menu-wrap
  > .el-scrollbar__bar
  > .el-scrollbar__thumb:hover {
  background-color: rgba(221, 221, 221, 0.55);
}

.ele-admin-header-nav-wrap > .el-scrollbar__bar.is-horizontal {
  top: 2px;
  bottom: auto;
}

.ele-admin-sidebar-nav-wrap > .el-scrollbar__wrap,
.ele-admin-sidebar-menu-wrap > .el-scrollbar__wrap {
  overflow-x: hidden;
  margin-bottom: 0 !important;
}

.ele-admin-header-nav-wrap > .el-scrollbar__wrap {
  overflow-y: hidden;
  margin-right: 0 !important;
}

.ele-admin-header-nav-wrap > .el-scrollbar__bar.is-vertical {
  display: none;
}

/* 切换布局时关闭过渡效果 */
body.ele-transition-disabled .ele-admin-layout {
  .ele-admin-header,
  .ele-admin-logo,
  .ele-admin-sidebar,
  .ele-admin-sidebar-nav,
  .ele-admin-body,
  .ele-admin-tabs,
  .ele-admin-content {
    transition: none !important;
  }
}
